$(function() {
    var shop = cookie.get('shop');
    if (shop) {
        shop = JSON.parse(shop);
        var idList = shop.map(elm => elm.id).join();
        $.ajax({
            type: "get",
            url: "../lib/shop.php",
            data: {
                'idList': idList
            },
            dataType: "json",
            success: function(data) {
                var tempstr = '';
                data.forEach(elm => {
                    let pic = JSON.parse(elm.pic);
                    var arr = shop.filter((val, i) => {
                        return val.id == elm.id;
                    });
                    console.log(arr);

                    tempstr += `
                    <div class="container">
                        <div class="carbox">
                            <div class="car-list">
                                <div class="car-list-message">
                                    <div class="top clear">
                                        <div class="check">
                                            <i class="iconfont icon-icon_checkbox"></i> 全选
                                        </div>
                                        <div class="img">&nbsp;</div>
                                        <div class="name">商品名称</div>
                                        <div class="price">单价</div>
                                        <div class="num">数量</div>
                                        <div class="total">小计</div>
                                        <div class="action">操作</div>
                                    </div>
                                    <div class="bottom">
                                        <div class="item-box">
                                            <div class="item-row clear">
                                                <div class="check">
                                                    <i class="iconfont icon-icon_checkbox"></i>
                                                </div>
                                                <div class="img">
                                                    <a href="#" target="_blank"><img src="..${pic[2].src}" alt=""></a>
                                                </div>
                                                <div class="name">
                                                    <h3>
                                                        <a href="#" target="_blank">${elm.title} </a>
                                                    </h3>
                                                </div>
                                                <div class="price"> ${elm.price}￥ </div>
                                                <div class="num">
                                                    <div class="change-num clear">
                                                        <a href="javascript:;">
                                                        <span  class="decnum" style="display:block;">-</span>
                                                        </a>
                                                        <input type="text" name="num" value="${arr[0].num}" min="1" max="${elm.num}" class="valuenum">
                                                        <a href="javascript:;" style="float: right">
                                                        <span  class="addnum" style="display:block;">+</span>
                                                        </a>
                                                    </div>
                                                </div>
                                                <div class="total totaladd"> ${(arr[0].num*elm.price).toFixed(2)}￥</div>
                                                <div class="action">
                                                    <a href="#" class="del">删除</a>
                                                </div>
                                            </div>
                                            <div class="item-sub-box">
                                                <div class="extend-buy">
                                                    <i class="iconfont icon-IconPlus"></i> 意外保障服务179元
                                                    <a href="#">了解意外保护 ></a>
                                                </div>
                                                <div class="extend-buy">
                                                    <i class="iconfont icon-IconPlus"></i> 碎屏保障服务99元
                                                    <a href="#">了解意外保护 ></a>
                                                </div>
                                            </div>
                                            <div class="item-sub-box">
                                                <div class="extend-buy">
                                                    <i class="iconfont icon-IconPlus"></i> 延长保修服务49元
                                                    <a href="#">了解延长保修 ></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="car-list-price clear">
                                    <div class="left">
                                        <a href="#">继续购物</a>
                                        <span>
                                            共 
                                            <i>${elm.num}</i>
                                            件商品，已选择 
                                            <i class="addnum1">${arr[0].num}</i>
                                            件
                                        </span>
                                    </div>
                                    <span class="price">
                                        合计：
                                        <em class="totaladd">${(arr[0].num*elm.price).toFixed(2)}</em> 元
                                    </span>
                                    <a href="#">去结算</a>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
                });
                $('main').append(tempstr);

                // 删除cookie
                $('.del').on('click', function() {
                    cookie.remove('shop');
                    location.reload();
                });

                // 添加数量
                var a = $('.valuenum').val();
                $('.addnum').on('click', function() {
                    $('.valuenum').val(++a);
                    $('.addnum1').html(a);
                    $('.totaladd').html((a * 1399).toFixed(2) + '￥');
                })

                // 减少数量
                $('.decnum').on('click', function() {
                    $('.valuenum').val(--a);
                    $('.addnum1').html(a);
                    $('.totaladd').html((a * 1399).toFixed(2) + '￥');
                    if (a < 1) {
                        a = 1;
                    }
                })
            }
        });
    }
});